<script setup lang="ts">
import { getRoleOptions } from '#/api/core/explanation';
import { useVbenForm } from '@vben/common-ui';
import { onMounted } from 'vue';

interface Props {
  handleSearch: (searchParams?: any) => void;
}
const props = defineProps<Props>();

/**
 * @Author: ShengXD <1519256482@qq.com>
 * @Date: 2024-11-07 15:45:41
 * @LastEditors: ShengXD <1519256482@qq.com>
 * @description: 初始化form配置
 * @return {*}
 */
const createFormSchema = async () => {
  const roleOptions = await getRoleOptions();
  formApi.setState(() => ({
    schema: [
      {
        component: 'VbenInput',
        componentProps: {
          placeholder: '请输入要搜索的员工姓名',
        },
        fieldName: '员工姓名',
        label: '员工姓名',
      },
      {
        component: 'VbenSelect',
        componentProps: {
          options: [
            {
              label: '已启用',
              value: '1',
            },
            {
              label: '未启用',
              value: '0',
            },
          ],
          placeholder: '请选择员工状态',
        },
        fieldName: 'status',
        label: '状态',
      },
      {
        component: 'VbenSelect',
        fieldName: 'role',
        componentProps: {
          options: roleOptions,
          placeholder: '请选择角色',
        },
        label: '角色',
      },
      {
        component: 'VbenInput',
        componentProps: {
          placeholder: '请输入要搜索的员工手机号',
        },
        fieldName: 'phone',
        label: '手机号',
      },
    ],
  }));
};

const [SearchForm, formApi] = useVbenForm({
  handleSubmit: props.handleSearch,
  wrapperClass: 'grid-cols-4',
  layout: 'horizontal',
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    hideRequiredMark: true,
  },
  schema: [],
  handleReset: () => {
    formApi.resetForm()
    props.handleSearch();
  },
});

onMounted(() => {
  createFormSchema();
});
</script>

<template>
  <SearchForm />
</template>
